<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="static/lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/lib/element/css/index.css">
    <link href="static/css/app.css" rel="stylesheet">
</head>
<body>
<div id="app" v-loading.fullscreen.lock="loadingGroup.fullscreenLoading" v-cloak>
    <el-container>
        <el-aside width="200px" class="unselectable">
            <div class="aside-controller">
                <el-button-group>
                    <el-tooltip content="Add Group" placement="top">
                        <el-button type="primary" @click="createNewGroupDialog = true" icon="el-icon-plus"></el-button>
                    </el-tooltip>
                    <el-tooltip content="Clear DNS Cache" placement="top">
                        <el-button type="primary" icon="el-icon-refresh"></el-button>
                    </el-tooltip>
                    <el-tooltip content="Setting" placement="top">
                        <el-button type="primary" icon="el-icon-setting"></el-button>
                    </el-tooltip>
                </el-button-group>
            </div>
            <ul class="list">
                <li :class="item.active ? 'current' : '' " v-for="item in hostGroups" @click="selectGroup(item.name)">
                    <i class="fa fa-lg"
                       :class="item.name != system.defaultSystemHostsName ? 'el-icon-fa-list-ul' : 'el-icon-fa-desktop'"></i>
                    {{ item.name }}
                    <span class="checkbox" v-if="item.name != system.defaultSystemHostsName">
                        <el-checkbox v-model="item.enabled" @change="enableGroup"></el-checkbox>
                    </span>
                    <span class="checkbox" v-else>
                        <el-checkbox checked disabled></el-checkbox>
                    </span>
                </li>
            </ul>
        </el-aside>
        <el-container>
            <el-header class="unselectable">
                <h4>{{ system.currentGroupName }}</h4><i class=" el-icon-fa-lock" v-if="system.currentGroupName == system.defaultSystemHostsName"></i>
                <div class="group-controller" v-if="system.currentGroupName != system.defaultSystemHostsName">
                    <el-button-group>
                        <el-button type="gray" icon="el-icon-edit" @click="openChangeGroupDialog"></el-button>
                        <el-button type="gray" icon="el-icon-delete" @click="deleteGroup"></el-button>
                    </el-button-group>
                </div>
            </el-header>
            <el-main>
                <el-table
                        :data="system.currentHosts.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize)"
                        v-loading="loadingGroup.hostsLoading"
                        stripe
                        border
                        empty-text="No results"
                        height="100%"
                        style="width: 100%; ">
                    <el-table-column
                            label="Enable"
                            width="80"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.enabled"
                                    :disabled="system.currentGroupName == system.defaultSystemHostsName"
                                    active-color="#13ce66"
                                    @change="changeHost($event, scope.$index)"
                                    inactive-color="#ff4949">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="IP"
                            resizable="true"
                            width="240">
                        <template slot-scope="scope">
                            <el-popover
                                    placement="top"
                                    width="200"
                                    trigger="click">
                                <el-input :disabled="system.isSystemHosts" @blur="changeHost($event, scope.$index)" v-model="scope.row.ip"
                                          placeholder="ip"></el-input>
                                <span class="edit-column" slot="reference">{{ scope.row.ip }}</span>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            resizable="true"
                            label="Domain"
                    >
                        <template slot-scope="scope">
                            <el-popover
                                    placement="top"
                                    width="200"
                                    trigger="click">
                                <el-input :disabled="system.isSystemHosts" @blur="changeHost($event, scope.$index)" v-model="scope.row.domain"
                                          placeholder="domain"></el-input>
                                <span class="edit-column" slot="reference">{{ scope.row.domain }}</span>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            resizable="true"
                            label="-"
                            width="50"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <i class="el-icon-delete" @click="deleteHost(scope.$index)"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- pagination start -->
                <el-pagination
                        class="unselectable"
                        background
                        :page-size="page.pageSize"
                        layout="slot, prev, pager, next"
                        @current-change="handleCurrentChange"
                        :total="this.system.currentHosts.length">
                        <span  class="el-pagination__total">Total {{ system.currentHosts.length }} items </span>

                </el-pagination>
                <!-- pagination end -->
            </el-main>
            <el-footer class="unselectable">
                <div class="add-panel">
                    <el-autocomplete
                            ref="ipInput"
                            class="inline-input"
                            v-model="addHostForm.inputIp"
                            :fetch-suggestions="querySearch"
                            prefix-icon="el-icon-location-outline"
                            @select="handleSelect"
                            placeholder="IP"
                            clearable
                    ></el-autocomplete>
                    <el-input
                            placeholder="Domain"
                            v-model="addHostForm.inputDomain"
                            prefix-icon="el-icon-fa-desktop"
                            @keyup.enter.native="addHost"
                            clearable>
                    </el-input>
                    <el-button icon="el-icon-plus" @click="addHost" :disabled="system.currentGroupName == system.defaultSystemHostsName"
                               :loading="loadingGroup.addHostLoading">Add
                    </el-button>
                    <el-button icon="el-icon-search">Search</el-button>
                </div>
            </el-footer>
        </el-container>
    </el-container>
    <el-dialog title="New Group" :visible.sync="createNewGroupDialog">
        <el-form :model="newGroupForm.data" @submit.native.prevent>
            <el-form-item label="Name" :label-width="newGroupForm.width">
                <el-input v-model="newGroupForm.data.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Hosts" :label-width="newGroupForm.width">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="Your hosts enter here line by line, just like the hosts file."
                        v-model="newGroupForm.data.hosts">
                </el-input>
                <span></span>
            </el-form-item>
            <el-form-item :label-width="newGroupForm.width">
                <el-upload
                    action="#"
                    :show-file-list="false"
                    :http-request="importHosts"
                >
                    <el-button size="small">Import</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="Enabled" :label-width="newGroupForm.width">
                <el-switch
                        v-model="newGroupForm.data.enabled"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="createNewGroupDialog = false">Cancel</el-button>
            <el-button type="primary" :loading="loadingGroup.addGroupLoading" @click="addGroup">Add</el-button>
        </div>
    </el-dialog>
    <el-dialog title="Change Group" :visible.sync="changeGroupDialog">
        <el-form :model="changeGroupForm.data" @submit.native.prevent>
            <el-form-item label="Name" :label-width="changeGroupForm.width">
                <el-input v-model="changeGroupForm.data.name" @keyup.enter.native="changeGroup" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="changeGroupDialog = false">Cancel</el-button>
            <el-button type="primary" :loading="loadingGroup.changeGroupLoading" @click="changeGroup">Save</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="static/js/vue-2.5.17.min.js"></script>
<!-- import JavaScript -->
<script src="static/lib/element/js/index.js"></script>
<script src="static/js/base.js"></script>
</html>